<template>
  <div class="box1">
    
    <el-row>
      <!-- 栅格，左8右16 -->
      <el-col :span="6" class="left">
        <div class="grid-content bg-purple">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="演唱会">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="18" class="right">
        <div class="grid-content bg-purple-light">
          <!-- 右边轮播图 -->
          <banners>
            <div slot="banner" v-for="(item, index) in imginfo" class="swiper-slide">
              <img :src="item.imgURL" alt="" srcset="">
            </div>
          </banners>
        </div>
      </el-col>
    </el-row>
    <!-- 列表图 -->
    <el-tabs v-model="activeNames" @tab-click="handleClick">
      <el-tab-pane label="今日推荐" name="first">
        <div class="all">
          <li class="lists" v-for="(item, index) in nameinfo">
            <img :src="item.imgURL" alt="">
            <p class="itemName">{{ item.itemName }}</p>
            <p>票价：{{ item.minPrice }}</p>
          </li>
        </div>
      </el-tab-pane>
      <el-tab-pane label="即将开售" name="second">
        <div class="all">
          <li class="lists" v-for="(item, index) in nameinfo">
            <img :src="item.imgURL" alt="">
            <p class="itemName">{{ item.itemName }}</p>
            <p>票价：{{ item.minPrice }}</p>
          </li>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 所有内容分布 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <p><span style="color: red;">1F</span>戏剧达人</p>
          <div class="allimg">
            <div class="large"> <img src="https://dmw.oss-cn-beijing.aliyuncs.com/img/cardimg1.jpg" alt=""></div>
            <li v-for="(item, index) in allimg " class="f">
              <img :src="item.imgURL" alt="">
              <div class="right">
                <h5>{{ item.itemName }}</h5>
                <p>{{ item.createdTime }}</p>
                <p>{{ item.itemType1Name }}</p>
                <p>￥{{ item.minPrice }}起</p>
              </div>
            </li>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>热门演出排行</span>
              <el-button style="float: right; padding: 3px 0" type="text">查看全部>></el-button>
            </div>
            <div id="box">
              <div class="itemName" v-for="(item, index) in nameinfo">
                <span class="num">{{ index + 1 }}</span> {{ item.itemName }}
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <p><span style="color: red;">2F</span>体育赛事</p>
          <div class="allimg">
            <div class="large"> <img src="https://dmw.oss-cn-beijing.aliyuncs.com/img/cardimg1.jpg" alt=""></div>
            <li v-for="(item, index) in allimg " class="f">
              <img :src="item.imgURL" alt="">
              <div class="right">
                <h5>{{ item.itemName }}</h5>
                <p>{{ item.createdTime }}</p>
                <p>{{ item.itemType1Name }}</p>
                <p>￥{{ item.minPrice }}起</p>
              </div>
            </li>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>热门演出排行</span>
              <el-button style="float: right; padding: 3px 0" type="text">查看全部>></el-button>
            </div>
            <div id="box">
              <div class="itemName" v-for="(item, index) in nameinfo">
                <span class="num">{{ index + 1 }}</span> {{ item.itemName }}
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <p><span style="color: red;">3F</span>舞蹈古典</p>
          <div class="allimg">
            <div class="large"> <img src="https://dmw.oss-cn-beijing.aliyuncs.com/img/cardimg1.jpg" alt=""></div>
            <li v-for="(item, index) in allimg " class="f">
              <img :src="item.imgURL" alt="">
              <div class="right">
                <h5>{{ item.itemName }}</h5>
                <p>{{ item.createdTime }}</p>
                <p>{{ item.itemType1Name }}</p>
                <p>￥{{ item.minPrice }}起</p>
              </div>
            </li>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>热门演出排行</span>
              <el-button style="float: right; padding: 3px 0" type="text">查看全部>></el-button>
            </div>
            <div id="box">
              <div class="itemName" v-for="(item, index) in nameinfo">
                <span class="num">{{ index + 1 }}</span> {{ item.itemName }}
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <p><span style="color: red;">4F</span>儿童亲子 </p>
          <div class="allimg">
            <div class="large"> <img src="https://dmw.oss-cn-beijing.aliyuncs.com/img/cardimg1.jpg" alt=""></div>

            <li v-for="(item, index) in allimg " class="f">
              <img :src="item.imgURL" alt="">
              <div class="right">
                <router-link to={name:buyTicket,paramas:scope.row.id}>
                  <h5>{{ item.itemName }}</h5>
                </router-link>
                <p>{{ item.createdTime }}</p>
                <p>{{ item.itemType1Name }}</p>
                <p>￥{{ item.minPrice }}起</p>
              </div>
            </li>

          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>热门演出排行</span>
              <el-button style="float: right; padding: 3px 0" type="text">查看全部>></el-button>
            </div>
            <div id="box">
              <div class="itemName" v-for="(item, index) in nameinfo">
                <span class="num">{{ index + 1 }}</span> {{ item.itemName }}
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <p><span style="color: red;">5F</span>摇滚在路上</p>
          <div class="allimg">
            <div class="large"> <img src="https://dmw.oss-cn-beijing.aliyuncs.com/img/cardimg1.jpg" alt=""></div>
            <li v-for="(item, index) in allimg " class="f">
              <img :src="item.imgURL" alt="">
              <div class="right">
                <h5>{{ item.itemName }}</h5>
                <p>{{ item.createdTime }}</p>
                <p>{{ item.itemType1Name }}</p>
                <p>￥{{ item.minPrice }}起</p>
              </div>
            </li>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>热门演出排行</span>
              <el-button style="float: right; padding: 3px 0" type="text">查看全部>></el-button>
            </div>
            <div id="box">
              <div class="itemName" v-for="(item, index) in nameinfo">
                <span class="num">{{ index + 1 }}</span> {{ item.itemName }}
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <footers></footers>
  </div>
</template>
<script>
import banners from "@/components/banner.vue"
import footers from "@/components/footers/footers.vue"
// import HelloWorld from '@/components/HelloWorld.vue'
// import Swiper from "@/dist/js/swiper.js"
export default {
  name: "homeview",
  data() {
    return {
      activeNames: 'first',
      activeIndex: '1',
      nameinfo: [],
      allimg: [],
      imginfo: [],
      activeIndex: '1',
      tableData: [
        {
          date: '音乐会',
        },
        {
          date: '歌剧话剧',
        },
        {
          date: '曲苑杂坛',
        },
        {
          date: '体育比赛',
        },
        {
          date: '儿童亲子',
        },
        {
          date: '舞蹈芭蕾',
        }]
    }
  },
  methods: {
    //轮播图
    getinfo() {
      this.$http.get("http://localhost:8082/imginfo").then((res) => {
        // console.log(res.data)
        let arr = [];
        for (let i = 0; i < res.data.length; i++) {
          let arr = res.data[i]
          this.imginfo.push(arr)
        }
        // console.log(this.imginfo);
      })
    },
    handleClick() {

    },
    activeNames() {

    },
    getname() {
      this.$http.get("http://localhost:8082/nameinfo").then((res) => {
        console.log(res.data);
        this.nameinfo = res.data;

      })
    },

    getallimginfo() {
      this.$http.get("http://localhost:8082/allinfo").then((res) => {
        console.log(res.data);
        this.allimg = res.data;

      })
    },
  },
  components: {
    banners,
    footers
  },
  mounted() {
    this.getinfo();
    this.getname();
    this.getallimginfo()
  }
}
</script>
<style scoped>
.el-table {
  color: white !important;
  background: red !important;
}

.el-table /deep/ tr {
  background: red !important;
}

.lists {
  list-style: none;
  display: inline-block;
  width: 250px;
  height: 200px;
  margin-left: 0;
}

.lists img {
  width: 160px;
  height: 200px;
  cursor: pointer;

}

.lists p {
  width: 160px;
  margin-bottom: 15px;
}

.itemName {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  cursor: pointer
}

.num {
  display: inline-block;
  width: 30px !important;
  height: 30px;
  line-height: 30px;
  background-color: gray;
  text-align: center;
  color: white;
}

#box div:nth-of-type(1) span {
  background-color: red;
}

#box div:nth-of-type(2) span {
  background-color: red;
}

#box div:nth-of-type(3) span {
  background-color: red;
}

.large img {
  width: 260px;
  height: 415px;
  float: left;
}

.f {
  list-style: none;
  width: 300px;
  height: 200px;
  float: left;
  border: 5px white solid;

}

.f img {
  width: 100px;
  height: 200px;
  float: left;
}

.f .right {
  width: 130px;
  height: 150px;
  float: left;
  margin-top: -25px;
  margin-left: 10px;
}

.el-table /deep/ th.el-table__cell.is-leaf {
  background-color: red !important;
  color: white;
}

#box {
  line-height: 50px;
  text-align: left;
}

.box-card {
  margin-top: 70px;
}

.box1 {
  position: relative;
  background-color: #f5f5f5;
  width: 1500px;
  /* text-align: center; */
}

.el-col-16 {
  background-color: white;
}

a {
  text-decoration: none;
  color: black;
}
.swiper-container{
  margin-left: 0;
}
</style>
